import React from 'react';
import {
  Popover,
  InputLabel,
  MenuItem,
  FormControl,
  Select,
  Link,
  Box,
  GridLegacy as Grid,
  TextField,
  IconButton,
  styled,
} from '@mui/material';
import { Add as AddIcon, Delete as DeleteIcon } from '@mui/icons-material';
import {
  fontColor,
  primaryColor,
  secondaryColor,
  radius,
  experimentGrey,
  experimentInputColor,
  experimentLabelColor,
  errorFieldBorder,
} from '../../theme';

const StyledRoot = styled(Box)(({ theme }) => ({
  '& .filter-row': {
    display: 'flex',
    alignItems: 'center',
    '& .MuiGrid-root': {
      paddingRight: theme.spacing(1),
      flexGrow: 1,
    },
  },
  '& .MuiSvgIcon-delete': {
    borderRadius: theme.spacing(0.4),
    alignSelf: 'center',
    color: experimentGrey,
    marginLeft: 'auto',
    marginRight: 'auto',
    padding: `${theme.spacing(0.6)} ${theme.spacing(1)}`,
    '& svg': {
      fontSize: '1.3rem',
    },
  },
  '&.MuiPopover-filter': {
    '& .MuiPopover-paper': {
      '&::-webkit-scrollbar-thumb': {
        background: secondaryColor,
        height: '0.5rem',
        borderRadius: '0.5rem',
      },
      '&::-webkit-scrollbar': {
        width: '0.5rem',
        height: '0.5rem',
        borderRadius: '0.5rem',
      },
    },
    '& .popoverFormControl': {
      width: '40rem',
      padding: '1rem',
      '& .MuiLink-root': {
        color: primaryColor,
        display: 'inline-flex',
        alignItems: 'center',
        fontSize: '1rem',
        cursor: 'pointer',
        borderBottom: `1px solid ${primaryColor}`,
        '&:hover': {
          textDecoration: 'none',
        },
        '& .MuiSvgIcon-root': {
          fontSize: '1.1rem',
          marginRight: '0.15rem',
          marginLeft: '-0.15rem',
        },
      },
      '& .MuiOutlinedInput-root': {
        background: experimentInputColor,
      },
      '& .MuiFormControl-fullWidth': {
        marginBottom: '0.5rem',
      },
      '& .MuiFilledInput-root': {
        borderRadius: radius,
        background: experimentInputColor,
        border: '1px solid transparent',
        '&.Mui-error': {
          borderColor: errorFieldBorder,
          boxShadow: '0 0 0 2px rgba(242, 69, 61, 0.2)',
        },
      },
      '& .MuiOutlinedInput-notchedOutline': {
        border: '0 !important',
      },
      '& .MuiFilledInput-underline': {
        '&:after, &:before': {
          display: 'none',
        },
      },
      '& .MuiFormLabel-root': {
        fontWeight: 'normal',
        color: fontColor,
        opacity: 0.54,
        '&.MuiInputLabel-shrink': {
          color: experimentLabelColor,
          opacity: 0.87,
        },
      },
    },
  },
}));

interface ParamHeader {
  id: string;
  numeric: boolean;
  disablePadding: boolean;
  label: string;
}

interface Filter {
  param: string;
  value: string;
}

interface ExperimentRowFilterProps {
  filter: Filter[];
  paramHeaders: ParamHeader[];
  setParameterValue: (val: string, index: number) => void;
  filterParameterChange: (val: string, index: number) => void;
  anchorEl: HTMLElement | null;
  setAnchorEl: (el: HTMLElement | null) => void;
  addFilterRow: () => void;
  removeFilter: (index: number) => void;
}

/**
 * ExperimentRowFilter Component
 * Filter component for experiment trials table rows
 */
const ExperimentRowFilter: React.FC<ExperimentRowFilterProps> = ({
  filter,
  paramHeaders,
  setParameterValue,
  filterParameterChange,
  anchorEl,
  setAnchorEl,
  addFilterRow,
  removeFilter,
}) => {
  const open = Boolean(anchorEl);
  const id = open ? 'simple-popover' : undefined;

  const popoverhandleClose = (): void => {
    setAnchorEl(null);
  };

  return (
    <Popover
      id={id}
      open={open}
      className="MuiPopover-filter"
      anchorEl={anchorEl}
      onClose={popoverhandleClose}
      anchorOrigin={{
        vertical: 'bottom',
        horizontal: 'left',
      }}
      transformOrigin={{
        vertical: 'top',
        horizontal: 'left',
      }}
    >
      <StyledRoot className="popoverFormControl">
        {filter.map((paramFilter, index) => (
          <Box className="filter-row" key={`filter${index}`}>
            <Grid container spacing={2}>
              <Grid item xs={8}>
                <FormControl variant="filled" fullWidth>
                  <InputLabel id="demo-simple-select-label">Parameter</InputLabel>
                  <Select
                    labelId="demo-simple-select-label"
                    id="demo-simple-select"
                    value={paramFilter.param}
                    onChange={(e) => filterParameterChange(e.target.value, index)}
                  >
                    {paramHeaders.map((header, menuIndex) => (
                      <MenuItem key={`paramfilter${menuIndex}`} value={header.label}>
                        {header.label}
                      </MenuItem>
                    ))}
                  </Select>
                </FormControl>
              </Grid>
              <Grid item xs={4}>
                <FormControl variant="filled" fullWidth>
                  <TextField
                    label="Parameter Value"
                    variant="filled"
                    value={paramFilter?.value || ''}
                    onChange={(e) => setParameterValue(e.target.value, index)}
                  />
                </FormControl>
              </Grid>
            </Grid>
            <IconButton className="MuiSvgIcon-delete" onClick={() => removeFilter(index)}>
              <DeleteIcon />
            </IconButton>
          </Box>
        ))}
        <Box my={0.6}>
          <Link
            component="button"
            color="primary"
            onClick={addFilterRow}
            sx={{
              cursor: 'pointer',
              border: 'none',
              background: 'none',
              textDecoration: 'none',
            }}
          >
            <AddIcon />
            Add Filter
          </Link>
        </Box>
      </StyledRoot>
    </Popover>
  );
};

export default ExperimentRowFilter;

